<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="false"%>
<%@ include file="/WEB-INF/base/include.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>report for ${ jmxName }</title>
<!-- ECharts单文件引入 -->
<script type="text/javascript" charset="utf-8" src="${ JS }/jquery-1.11.3.js"></script>
<script type="text/javascript" charset="utf-8" src="${ ECHAR }/www2/js/echarts-all.js"></script>

<script type="text/javascript" charset="utf-8" src="${JS }/loadingUtils.js"></script>

<script type="text/javascript" charset="utf-8" src="${JS }/performancejs.js"></script>
<script type="text/javascript" charset="utf-8" src="${JS }/performancejs_page.js"></script>

<!-- datetimepicker 相关的js和css文件引入 -->
<script charset="utf-8" type="text/javascript" src="${DATETIMEPICKER }/jquery.datetimepicker.js"></script>
<link type="text/css" href="${ DATETIMEPICKER }/jquery.datetimepicker.css" rel="stylesheet" />
	
<link rel="stylesheet" charset="utf-8" href="${ BOOTSTRAP }/bootstrap-3.3.5-dist/css/bootstrap.css"></script>

<script type="text/javascript" charset="utf-8" src="${ BOOTSTRAP }/bootstrap-3.3.5-dist/js/bootstrap.js"></script>

<script type="text/javascript">
	$(function() {
		$('#datetimStart').datetimepicker({
			dayOfWeekStart : 7,
			lang : 'en',
			//disabledDates : [ '1986/01/08', '1986/01/09', '1986/01/10' ],
			//startDate : '1986/01/05' 
			minDate:'${ datetimStart }',
			value : '${ datetimStart }',
			//maxDate : '${now}',
			onShow:function( ct ){
			   this.setOptions({
			    maxDate:jQuery('#datetimEnd').val()?jQuery('#datetimEnd').val():false
			   })
			},
			timepicker:false,
			step : 5
		});

		$('#datetimEnd').datetimepicker({
			dayOfWeekStart : 7,
			lang : 'en',
			//disabledDates : [ '1986/01/08', '1986/01/09', '1986/01/10' ],
			//minDate : '${ datetimStart }',
			onShow:function( ct ){
			   this.setOptions({
			    minDate:jQuery('#datetimStart').val()?jQuery('#datetimStart').val():false
			   })
			},
			timepicker:false,
			//maxDate : '${now}',
			value : '${now}',
			step : 5
		});
	})
</script>
</head>
<body>
<div style="width:75%; margin: 0 auto;">
	<input id="jmxUrl" value="${ jmxUrl }"
		style="width: 200px; visibility: hidden;">
	<br>
	<input type="text"
		value="<c:url value='/hpe/performance'/>" id="ajaxUrl"
		style="width: 200px; visibility: hidden;">
	<br>

	<h1>The report of ${ jmxName }</h1>
	<h3>Select the date or date range and click the start button to show the report.</h3>
	
	<!--  String dateStart, String dateEnd -->
	<input type="text" value="" title="select the start time" id="datetimStart" name="dateStart" />
	
	<c:if test="${!empty mode}">
		~<input type="text" title="select the end time" value="" id="datetimEnd" name="dateEnd" />
		<input type="button" value="export excel" id="reportExport" 
		title="click to download a excel timerange report" class="btn btn-primary"/> 
		<input id="showReport" type="button" value="show" 
		title="click to show the timerange report" class="btn btn-info">
	</c:if>
	<br><br>
	<c:if test="${empty mode}">
		<input id="startReport" type="button" value="start" class="btn btn-success"
			title="click to start the report">
	</c:if>

	</div>
	<div id="cover">
		<div id="summaryLineChart" style="height: 500px"></div>
		<div id="heapChart" style="height: 500px"></div>
		<div id="panelChart" style="height: 400px"></div>
	</div>
</body>
</html>